<template>
    <div>
        <!-- 顶部返回栏 -->
        <bufantop></bufantop>

        <div class="contentBox" v-html="this.list.content">

        </div>

        <p class="recommend">专题推荐</p>

        <div class="topic-rec" v-for="item in listTopic" :key="item.id">
            <img :src="item.scene_pic_url" alt="">
            <p>{{item.title}}</p>
        </div>



    </div>
</template>

<script>
import {detailaction} from "@/api/topic/detailaction"
import bufantop from "@/components/bufantop.vue"
export default {
    data(){
        return{
            value:"",
            list:[],
            listTopic:"",
        }
    },
    components:{
        bufantop
    },
    created(){
        this.value=this.$route.query.val,
        this.getData()
    },
    methods:{
        
        getData(){
            detailaction({
                id:this.value,
            }).then(res=>{
                console.log(res);
                this.list=res.data,
                this.listTopic=res.recommendList
            })
        }
    }
}
</script>

<style lang="scss">
    // 图片格式
    .contentBox img{
        width: 100%;

    }
    // 专题推荐
    .recommend{
        font-size: .4rem;
        color: #999;
        padding: 15px 0;
    }
    .topic-rec {
        background-color: #fff;
        padding: 12px;
        margin-bottom: 15px;
    }
    .topic-rec img{
        width: 321px;
        height: 139px;
    }
    .topic-rec  p{
        font-size: 15px;
        margin: 15px 0;
    }
</style>
<style lang="scss" scoped>
    
</style>